<template>
  <a-form-item
    :label="field.label"
    :name="field.field"
    :rules="field.rules"
    :help="field.help"
    :extra="field.description"
  >
    <a-upload
      v-model:file-list="fileList"
      :disabled="disabled || field.disabled"
      :before-upload="handleBeforeUpload"
      @change="handleChange"
      @remove="handleRemove"
      v-bind="field.props"
    >
      <a-button>
        <upload-outlined />
        选择文件
      </a-button>
    </a-upload>
  </a-form-item>
</template>

<script setup>
import { computed } from 'vue'
import { UploadOutlined } from '@ant-design/icons-vue'

const props = defineProps({
  field: {
    type: Object,
    required: true
  },
  model: {
    type: Object,
    required: true
  },
  value: {
    type: Array,
    default: () => []
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:value', 'change', 'remove'])

// 计算属性：文件列表
const fileList = computed({
  get() {
    return props.value || props.field.defaultValue || []
  },
  set(val) {
    emit('update:value', val)
  }
})

// 上传前处理
const handleBeforeUpload = (file) => {
  if (props.field.props?.beforeUpload) {
    return props.field.props.beforeUpload(file)
  }
  return true
}

// 处理文件变化
const handleChange = (info) => {
  emit('change', info)
  emit('update:value', info.fileList)
}

// 处理文件移除
const handleRemove = (file) => {
  emit('remove', file)
}
</script> 